<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div class="row clearfix">
	<div class="col-md-4 column">
		<div class="page-header">
			<h3>时间区间</h3>
		</div>
		<div class="row clearfix">
			<div class="col-md-10 column">
				<div class="input-group">
					<input type="text" id="start" class="form-control" readonly>
					<span class="input-group-addon">--</span> <input type="text"
						id="end" class="form-control" readonly>
				</div>
			</div>
			<div class="col-md-2 column">
				<div class="pull-right">
					<input name="submit" type="button" value="确定"
						class="btn btn-default" />
				</div>
			</div>
		</div>
		<div class="page-header">
			<h3>统计表格</h3>
		</div>
		<table class="table table-striped table-hover .table-condensed">
			<thead>
				<tr>
					<th>功能名称</th>
					<th>使用次数</th>
				</tr>
			</thead>
			<tbody id="fsTbody">
			</tbody>
		</table>
	</div>
	<div class="col-md-8 column">
		<div class="page-header">
			<h3>使用占比</h3>
		</div>
		<div id="chart"></div>
	</div>
</div>
<script>
	$(function() {
		//开始时间
		var minDate = laydate.now("YYYY-MM-DD");
		//结束时间
		var maxDate = laydate.now("YYYY-MM-DD");
		var start = {
			elem : '#start',
			format : 'YYYY-MM-DD',
			isclear : false,
			min : '', //设定最小日期为当前日期
			max : laydate.now(),//最大日期
			choose : function(datas) {
				end.min = datas; //开始日选好后，重置结束日的最小日期
				end.start = datas //将结束日的初始值设定为开始日
				minDate = datas;
			}
		};
		var end = {
			elem : '#end',
			format : 'YYYY-MM-DD',
			isclear : false,
			min : laydate.now(),
			max : '2099-06-16 23:59:59',
			choose : function(datas) {
				start.max = datas; //结束日选好后，重置开始日的最大日期
				maxDate = datas;
			}
		};
		laydate(start);
		laydate(end);
		$("#start").val(minDate);
		$("#end").val(maxDate);
		$("input[name=submit]")
				.click(
						function() {
							//产品uuid
							var pid = $("select[id=selectProduct] :selected")
									.attr("pid");
							//图表数据数组
							var fsArray = new Array();
							$
									.post(
											"${basePath}/appFunction/statistic",
											{
												'productId' : pid,
												'minDate' : minDate,
												'maxDate' : maxDate
											},
											function(data) {
												var result = data.result;
												if (result.success) {
													var list = result.object;
													var fsTrs = "";
													for ( var i in list) {
														fsTrs += fsTr(
																filterXSS(list[i].functionName),
																list[i].total);
														fsArray[i] = new Object();
														fsArray[i].name = filterXSS(list[i].functionName);
														fsArray[i].y = Number(list[i].total);
													}
													$("#fsTbody").html(fsTrs);
													showChart(minDate, maxDate,
															fsArray);
												}
											});
						});
	});
	function fsTr(name, total) {
		return "<tr><td>" + name + "</td><td>" + total + "</td></tr>";
	}
	function showChart(minDate, maxDate, fsArray) {
		$('#chart')
				.highcharts(
						{
							chart : {
								plotBackgroundColor : null,
								plotBorderWidth : null,
								plotShadow : false,
								type : 'pie'
							},
							title : {
								text : minDate + '到' + maxDate + '的使用占比'
							},
							tooltip : {
								pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
							},
							plotOptions : {
								pie : {
									allowPointSelect : true,
									cursor : 'pointer',
									dataLabels : {
										enabled : true,
										format : '<b>{point.name}</b>: {point.percentage:.1f} %',
										style : {
											color : (Highcharts.theme && Highcharts.theme.contrastTextColor)
													|| 'black'
										}
									}
								}
							},
							series : [ {
								name : 'Brands',
								colorByPoint : true,
								data : fsArray
							/* data : [ {
								name : 'IE',
								y : 56.33
							}, {
								name : 'Chrome',
								y : 24.03,
								sliced : true,
								selected : true
							}, {
								name : 'Firefox',
								y : 10.38
							}, {
								name : 'Safari',
								y : 4.77
							}, {
								name : 'Opera',
								y : 0.91
							}, {
								name : 'etc',
								y : 0.2
							} ] */
							} ]
						});
	};
</script>